<template>
<div>
    <Button v-if="!disabled" @click="handleShowAddRefundModel()">新增退款</Button>
    <table border="0" cellspacing="0" cellpadding="0" class="minitable" long mgt2>
        <tr bg-gray5>
            <td>#</td>
            <td>退款时间</td>
            <td>退款金额(元)</td>
            <td>退款说明</td>
            <td>退款状态</td>
            <td>操作人员</td>
            <td>退款备注</td>
            <td v-if="!disabled">操作</td>
        </tr>
        <tr v-for="(item, index) in refunds" :key="index">
            <td>{{index+1}}</td>
            <td>{{formatTimeStr(item.creationTime)}}</td>
            <td>{{formatPrice(item.refundAmount)}}</td>
            <td><p ellipsis w8>{{item.description}}</p></td>
            <td>{{['处理中','退款完成','已取消'][item.status]}}</td>
            <td>{{adminMap[item.creatorUserId].userName}}</td>
            <td><p ellipsis w8>{{item.remark}}</p></td>
            <td v-if="!disabled">
                <span blue linkable @click="handleShowAddRefundModel(item)" mgr2>编辑</span>
                <span blue linkable @click="handleDeleteRefund(item.id)">删除</span>
            </td>
        </tr>
    </table>

	<Modal v-model="showModal" :title="model.id?'更新退款':'新增退款'" :mask-closable="false">
		<Form ref="order-refund" :model="model" :label-width="100">
            <FormItem label="订单编号" prop="orderNumber">
                <span>{{model.orderNumber}}</span>
            </FormItem>
            <FormItem v-if="orderTotalAmount!=null" label="订单实付金额">
                <span red>￥{{formatPrice(orderTotalAmount)}}</span>
            </FormItem>
            <FormItem v-if="model.creationTime" label="退款时间" prop="creationTime">
                <span>{{formatTimeStr(model.creationTime)}}</span>
            </FormItem>
            <FormItem label="退款金额" prop="refundAmount" required>
                <InputNumber v-model="model.refundAmount" :min="0"  />
            </FormItem>
            <FormItem label="退款说明" prop="description">
                <Input v-model="model.description" type="textarea" :rows="4" />
            </FormItem>
            <FormItem v-if="model.creatorUserId" label="操作人员">
                <span>{{adminMap[model.creatorUserId].userName}}</span>
            </FormItem>
            <Divider />
			<FormItem label="退款状态" prop="status">
				<RadioGroup v-model="model.status">
					<Radio :label="0">处理中</Radio>
					<Radio :label="1">退款完成</Radio>
					<Radio :label="2">已取消</Radio>
				</RadioGroup>
			</FormItem>
            <FormItem label="备注" prop="remark">
                <Input v-model="model.remark" type="textarea" :rows="4" placeholder="可以填写退款的支付信息，如支付宝(转账单号：201810251557001)" />
                <p gray4>备注仅管理员可见</p>
            </FormItem>
		</Form>
        <div slot="footer">
            <Button type="primary" @click="handleSave">{{model.id?'更新':'添加'}}</Button>
            <Button @click="showModal=false">取消</Button>
        </div>
	</Modal>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import OrderBase from './OrderBase';

@Component({})
export default class OrderRefundManager extends OrderBase{
    @Prop() orderNumber:any;
    @Prop({type:Number,default:null}) orderTotalAmount:Number;
    @Prop({type:Boolean,default:false}) disabled:Boolean;
    showModal:Boolean = false;
    model = {
        id: null,
        orderNumber: "",
        refundAmount: 0,
        description: "",
        status: 0,
        remark: ""
    }
    refunds = []
	get adminMap() {
		return this.$store.state.user.adminMap;
	}
    handleShowAddRefundModel(item) {
        if(item == null) {
            this.model = {
                id: null,
                orderNumber: this.orderNumber,
                refundAmount: 0,
                description: "",
                status: 0,
                remark: ""
            }
        }else {
            this.model = Object.assign({}, item);
        }
        this.showModal = true;
    }
    async handleAddRefund() {
		var response = await this.post('AdminOrderManager/AddRefund', this.model);
		if(response.success) {
            this.getRefunds();
            this.showModal = false;
        }
    }
    async handleDeleteRefund(id) {
        this.confirm('确认要删除此退款项吗？', async () => {
            var response = await this.post('AdminOrderManager/DeleteRefund', { id: id });
            if(response.success) {
                this.getRefunds();
            }
        })
    }
    async handleUpdateRefund() {
		var response = await this.put('AdminOrderManager/UpdateRefund', this.model);
		if(response.success) {
            this.getRefunds();
            this.showModal = false;
        }
    }
    async handleSave() {
		(this.$refs["order-refund"] as any).validate(async (valid) => {
			if(valid) {
                if(this.model.id == null) {
                    await this.handleAddRefund();
                }else {
                    await this.handleUpdateRefund();
                }
			}
		});
    }
    async getRefunds() {
		var response = await this.get('AdminOrderManager/GetOrderRefunds', { orderNumber: this.orderNumber });
		if(response.success) {
			await this.$store.dispatch('user/getAdminProfiles', response.result.map(elem => elem.creatorUserId));
            this.refunds = response.result;
        }
    }
	async created() {
        await this.getRefunds();
	}
}
</script>